<style>
    .clearfix:after {clear: both;}
    .clearfix:before, .clearfix:after {content: " "; display: table;}
    .maintain-all{min-height:600px;}
    #mask{  background-color:#ccc;  opacity:0.5;  filter: alpha(opacity=50);  position:absolute;  left:0;  top:0;  z-index:1000;}
    #login{  position:fixed;  width: 400px; height: 410px; z-index:1001;  background: white;  border-radius: 15px;  overflow: hidden;}
    #close{z-index: 99999;}
    .page-wrap{text-align: center}
    .pagination{display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px;}
    .pagination li {display: inline-block;}
    .pagination li a {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;text-decoration: none;background-color: #fff; border: 1px solid #ddd;}
    .pagination li span {position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #333;text-decoration: none;background-color: #fff; border: 1px solid #ddd;}
    .pagination>li:first-child>a{margin-left: 0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
    .pagination>li:last-child>a{border-top-right-radius: 4px;  border-bottom-right-radius: 4px;}
    .selected{z-index: 3;color: #fff !important;cursor: default;background-color: #337ab7 !important; border-color: #337ab7!important;}
</style>
<div class="maintain-all">
    <div id="maintain">
        <!--站点管理开始-->
        <div id="maintain-content">
            <input type="number" class="hidden" id="input-page">
            <!--站点列表-->
            <div class="clearfix">
                <a href="javascript:void(0)" class="weui-btn weui-btn_mini weui-btn_primary" id="add">添加站点</a>
                <!--<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary js-add" style="vertical-align: middle;">添加站点</a>-->
                <a href="javascript:refresh()" class="weui-btn weui-btn_mini weui-btn_primary">刷新</a>
                <select id="label-list">
                    <option value="">请选择</option>
                </select>
                <a href="javascript:void(0)" class="weui-btn weui-btn_mini weui-btn_primary search" style="vertical-align: middle; float: right ;background: #EEEEEE; color: #222">搜索</a>
                <input id="input-box" class="weui-btn weui-btn_mini weui-btn_default" type="text" style="height: 26px; float: right;vertical-align: middle;border-radius: 5px;width: 171px;border: 1px solid #ddd;" placeholder="请输入站点编号或名称">
            </div>
            <div class="weui-cell weui-cell_access " style="border-top: 2px solid #57a957; margin-top: 15px;">
                <div class="weui-cell__bd" style="min-width: 45px"> <small>站点编号</small></div>
                <div class="weui-cell__bd"><small>站点名称</small></div>
                <div class="weui-cell__bd"><small>站点电话</small></div>
                <div class="weui-cell__bd"><small class="">地址</small></div>
                <div class="weui-cell__bd" style="min-width:80px"><small>类别</small></div>
                <div class="weui-cell__bd" style="min-width: 200px"><small>操作</small></div>
            </div>

            <div id="maintain-list">

            </div>
        </div>
        <!--添加站点表单  修改也用当前表单赋值 这个可以做模态框，或者做隐藏切换 -->
        <div class="page-wrap" id="page"><ul class="pagination"></ul></div>
    </div>
</div>

<sss>
    var Events = (function () {
        var clientList = {},
            listen,
            trigger,
            remove;
        listen = function (key, fn) {
            if (!clientList[key]) {
                clientList[key] = [];
            }
            clientList[key].push(fn);
        };

        trigger = function () {
            var key = Array.prototype.shift.call(arguments),
                fns = clientList[key];

            if (!fns || fns.length === 0) {
                return false;
            }

            for (var i = 0, fn; fn = fns[i++];) {
                fn.apply(this, arguments);
            }
        };
        remove = function (key, fn) {
            var fns = clientList[key];

            if (!fns) {
                return false;
            }

            if (!fn) {
                fns && (fns.length = 0);
            } else {
                for (var j = fns.length - 1; j >= 0; j--) {
                    var _fn = fns[j];
                    if (_fn === fn) {
                        fns.splice(j, 1);
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
    })();
    function openNew() {
        //获取页面的高度和宽度
        var sWidth=document.body.scrollWidth;
        var sHeight=document.body.scrollHeight;
        //获取页面的可视区域高度和宽度
        var wHeight=document.documentElement.clientHeight;
        var oMask=document.createElement("div");
        oMask.id="mask";
        oMask.style.height=sHeight+"px";
        oMask.style.width=sWidth+"px";
        document.body.appendChild(oMask);
        var oLogin=document.createElement("div");
        oLogin.id="login";
        oLogin.innerHTML="<div class='loginCon'><div id='close' style='position: absolute; right: 0; top: 0;'><i class='weui-icon weui-icon-cancel weui-icon-original' style='font-size: 25px;'></i></div></div>";
        document.body.appendChild(oLogin);
        //获取登陆框的宽和高
        var dHeight=oLogin.offsetHeight;
        var dWidth=oLogin.offsetWidth;
        //设置登陆框的left和top
        oLogin.style.left=sWidth/2-dWidth/2+"px";
        oLogin.style.top=wHeight/2-dHeight/2+"px";
        //点击关闭按钮
        var oClose=document.getElementById("close");
        //点击登陆框以外的区域也可以关闭登陆框
        oClose.onclick=oMask.onclick=function(){
            document.body.removeChild(oLogin);
            document.body.removeChild(oMask);
        };
    }
    /**
     * @param {Object} datas
     * */
    function createHtml(datas) {
        $('#maintain-list').empty('div.list');
        for (item of datas) {
            var c = `<input type="checkbox" class="weui-switch switch" style="vertical-align: middle;" data-id="${item.cust_code}" checked >`;
            if (!item.released) {
                c = `<input type="checkbox" class="weui-switch switch" style="vertical-align: middle;" data-id="${item.cust_code}" >`;
            }
            if (item.l) {
                var l = `<a class="weui-btn weui-btn_mini weui-btn_warn js-delete" data-id="${item.cust_code}" style="vertical-align: middle">删除</a>`
            } else {
                l = ""
            }
            if(item.cust_type !== '04'){
                var d=`<a href="javascript:void(0)" style="vertical-align: middle;" class="weui-btn weui-btn_mini weui-btn_primary js-add" data-type="${item.l || ''}" data-id="${item.cust_code}">编辑 </a>`
            }else{
                var d="";
            }
            $('#maintain-list').append(`
            <div class='weui-cell weui-cell_access list'>
                <div class='weui-cell__bd' style="min-width: 45px">
                    ${item.cust_code}
                </div>
                <div class='weui-cell__bd' style="min-width: 145px; white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;display: inline">
                    ${item.cust_name}
                </div>
                <div class='weui-cell__bd' style="min-width: 145px; white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hidden;display: inline">
                    ${item.company_tel}
                </div>
                <div class='weui-cell__bd' style="min-width: 145px">
                    ${item.company_address}
                </div>

                <div class='weui-cell__bd' style="min-width:80px">
                    ${item.cn}
                </div>
                <div class='weui-cell__bd' style="min-width: 200px">
                    ${l}
                    ${d}
                    ${c}
                </div>
            </div>
        `);
        }
    }
    function createHtmlEdit(data, klass) {
        if (klass == 1) {
            $('#login').css({
                height: '200px'
            });
            $('#login').append(`
            <div class="weui-cells__title">修改站点信息</div>
            <div class="weui-cells weui-cells_form bc-district">
              <div class="weui-cell">
                <div class="weui-cell__hd" style="width:80px;"><label class="weui-label">经纬度</label></div>
                <div class="weui-cell__bd">
                  <input id="lant" name="lng" class="weui-input edit" type="text" placeholder="例:116.518102,40.024864" value="${data.lant}">
                </div>
                <!--<div class="weui-cell__hd" style="width:80px;"><label class="weui-label">纬度</label></div>-->
                <!--<div class="weui-cell__bd">-->
                <!--<input id="lat" name="lat" class="weui-input edit" type="text" placeholder="请输入纬度" value="${data.lat || 0}">-->
                <!--</div>-->
                </div>
                <div class="footer-btn" style="padding: 20px; text-align: center;">
                <a data-id="${data.cust_code}" id="save" href="javascript:void(0)" class="weui-btn weui-btn_mini weui-btn_primary">保存</a>
                </div>
                </div>
                `);
        } else if (klass === 2) {
            if (data.l) {
                $('#login').append(`
                <div class="weui-cells__title">落地服务</div>
                <div class="weui-cells weui-cells_form bc-district">
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">名称</label></div>
                <div class="weui-cell__bd">
                <input id="name" name="" class="weui-input edit" type="text" placeholder="请输入名称" value="${data.cust_name}">
                </div>
                </div>
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">客户编号</label></div>
                <div class="weui-cell__bd">
                <input id="num" name="" class="weui-input edit" type="text" placeholder="请输入编号" value="${data.cust_code}" >
                </div>
                </div>
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
                <div class="weui-cell__bd">
                <input id="tel" name="lat" class="weui-input edit" type="text" placeholder="请输入联系电话" value="${data.company_tel}">
                </div>
                </div>
                <div class='weui-cell'>
                <div class='weui-cell__hd'>
                <label class='weui-label'>省市</label>
                </div>
                <div class='weui-cell__bd'>
                <select class='user-modify weui-input' id='a'  info=1 name='province' placeholder="请输入所在省市" value="${data.province}" ></select>
                </div>
                </div>
                <div class='weui-cell'>
                <div class='weui-cell__hd'>
                <label class='weui-label'>市区</label>
                </div>
                <div class='weui-cell__bd'>
                <select class='user-modify weui-input' id="b"  info=1 name='city' placeholder="请输入所在市区" value="${data.city}"></select>
                </div>
                </div>
                <div class='weui-cell'>
                <div class='weui-cell__hd'>
                <label class='weui-label'>区县</label>
                </div>
                <div class='weui-cell__bd'>
                <select class='user-modify weui-input' id ="c" info=1 name='district' placeholder="请输入所在区县" value="${data.area}"></select>
                </div>
                </div>
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
                <div class="weui-cell__bd">
                <input id="d" name="lat" class="weui-input edit" type="text" placeholder="请输入详细地址" value="${data.company_address}">
                </div>
                </div>

                <div class="footer-btn" style="padding: 20px; text-align: center;">
                <a id="modify" href="javascript:void(0)" class="weui-btn weui-btn_mini weui-btn_primary">保存</a>
                </div>
                </div>
                `);
                DISTRICT.load('.bc-district');
            } else {
                $('#login').append(`
                <div class="weui-cells__title">落地服务</div>
                <div class="weui-cells weui-cells_form bc-district">
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">名称</label></div>
                <div class="weui-cell__bd">
                <input id="name" name="" class="weui-input edit" type="text" placeholder="请输入名称" >
                </div>
                </div>
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">客户编号</label></div>
                <div class="weui-cell__bd">
                <input id="num" name="" class="weui-input edit" type="text" placeholder="请输入编号" >
                </div>
                </div>
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
                <div class="weui-cell__bd">
                <input id="tel" name="lat" class="weui-input edit" type="text" placeholder="请输入联系电话">
                </div>
                </div>
                <div class='weui-cell'>
                <div class='weui-cell__hd'>
                <label class='weui-label'>省市</label>
                </div>
                <div class='weui-cell__bd'>
                <select class='user-modify weui-input' id='a'  info=1 name='province' placeholder="请输入所在省市" ></select>
                </div>
                </div>
                <div class='weui-cell'>
                <div class='weui-cell__hd'>
                <label class='weui-label'>市区</label>
                </div>
                <div class='weui-cell__bd'>
                <select class='user-modify weui-input' id="b"  info=1 name='city' placeholder="请输入所在市区" ></select>
                </div>
                </div>
                <div class='weui-cell'>
                <div class='weui-cell__hd'>
                <label class='weui-label'>区县</label>
                </div>
                <div class='weui-cell__bd'>
                <select class='user-modify weui-input' id ="c" info=1 name='district' placeholder="请输入所在区县" ></select>
                </div>
                </div>
                <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">详细地址</label></div>
                <div class="weui-cell__bd">
                <input id="d" name="lat" class="weui-input edit" type="text" placeholder="请输入详细地址">
                </div>
                </div>
                <div class="footer-btn" style="padding: 20px; text-align: center;">
                <a  id="add-save" href="javascript:void(0)" class="weui-btn weui-btn_mini weui-btn_primary">新增</a>
                </div>
                </div>
                `);
                DISTRICT.load('.bc-district');
            }
        }
    }
    // 初始化页面
    function init() {
        TOAST.load('加载中', ' ', 10);
        var page = $('#input-page').val();
        if (!page) {
            page = 1;
        }
        var keywords = $('#input-box').val();
        var c = $('#label-list').val();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/getlist',
            type: 'GET',
            data: {
                page: page,
                keywords: keywords,
                cust_type : c
            },
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                var datas = data.data.list;
                var page = data.page;
                $('#page').html(page);
                createHtml(datas);
                TOAST.stop();
            }
        });
    }
    init();
    // 编辑信息
    $('#maintain').on('click', '.js-add', function () {
        var id = $(this).attr('data-id');
        var klass;
        if ($(this).attr('data-type')) {
            klass = 2;
        } else {
            klass = 1;
        }
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/getinfo',
            type: 'POST',
            data: {
                cust_code: id
            },
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                if (data.state) {
                    var datas = data.data.info;
                    Events.trigger('modal', openNew());
                    createHtmlEdit(datas, klass);
                } else {
                    TOAST.wran(data.errormsg, ' ', 1)
                }
            }
        });
    });
    Events.listen('modal', function () {
        $('#login').on('click', '#save', function () {
            var id = $(this).attr('data-id');
            var lant = $('#lant').val();
            $.ajax({
                url: 'http://api.hongyanche.com/maintain_admin/modify',
                type: 'POST',
                data: {
                    cust_code: id,
                    lant
                },
                xhrFields:{
                    withCredentials:true
                },
                success: function (data) {
                    if (data.state) {
                        TOAST.success('修改成功', ' ', 1);
                        $('#mask').remove();
                        $('#login').remove();
                        return;
                    }
                    return TOAST.wran('修改失败', ' ', 1)
                },
                error: function (e) {
                    return TOAST.wran(e.errormsg, ' ', 1)
                }
            })
        });
    });
    // 删除

    $('body').on('click', '.delete', function () {
        var id = $(this).attr('data-id');
        var isDelete = confirm('是否要删除该信息？');
        if (isDelete) {
            $.ajax({
                url: 'http://api.hongyanche.com/maintain_admin/remove',
                type: 'POST',
                data: {
                    cust_code: id
                },
                xhrFields:{
                    withCredentials:true
                },
                success: function (data) {
                    if (data.state) {
                        init();
                        return TOAST.success('删除成功', ' ', 1);
                    }
                    return TOAST.wran(data.errormsg, ' ', 1);
                }
            })
        }
    });

    // 开放关闭
    $('body').on('change', '.switch', function () {
        var ID = $(this).attr('data-id');
        var ischecked = $($(this)).is(':checked');
        if (ischecked) {
            $.ajax({
                url: 'http://api.hongyanche.com/maintain_admin/release',
                type: 'POST',
                data: {
                    release: 1,
                    cust_code: ID
                },
                xhrFields:{
                    withCredentials:true
                },
                success: function (data) {
                    if (data.state) {
                        return init();
                    }
                    return TOAST.wran('开启失败', ' ', 1)
                },
                error: function () {
                    return TOAST.wran('网络错误', ' ', 1)
                }
            })
        } else {
            $.ajax({
                url: 'http://api.hongyanche.com/maintain_admin/release',
                type: 'POST',
                data: {
                    release: 0,
                    cust_code: ID
                },
                xhrFields:{
                    withCredentials:true
                },
                success: function (data) {
                    if (data.state) {
                        return init();
                    }
                    return TOAST.wran('关闭失败', ' ', 1)
                },
                error: function () {
                    return TOAST.wran('网络错误', ' ', 1)
                }
            })
        }
    });
    // 搜索
    $('body').on('click', '.search', function () {
        TOAST.load('加载中',' ', 10);
        var searchText = $(this).next().val();
        var c = $('#label-list').val();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/getlist',
            type: 'POST',
            data: {
                keywords: searchText,
                cust_type:c
            },
    xhrFields:{
    withCredentials:true
    },
            success: function (data) {
                if (data.state) {
                    TOAST.stop();
                    var datas = data.data.list;
                    var page = data.page;
                    $('#page').html(page);
                    return createHtml(datas);
                }
                return TOAST.wran('失败', ' ', 1);
            }
        });
    });
    // 分页按钮
    function ajax_page(num) {
        var num = num;
        $('#input-page').val(num);
        TOAST.load('加载中', ' ', 10);
        var k = $('#input-box').val();
        var c = $('#label-list').val();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/getlist',
            type: 'POST',
            data: {
                page: num,
                keywords: k,
                cust_type:c
            },
    xhrFields:{
    withCredentials:true
    },
            success: function (data) {
                if (data.state) {
                    TOAST.stop();
                    var datas = data.data.list;
                    var page = data.page;
                    createHtml(datas);
                    $('#page').html(page);
                    document.body.scrollTop=0;
                    document.documentElement.scrollTop=0;
                    return;
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            }
        })
    }
    // 添加站点，落地服务
    $('body').on('click', '#add', function () {
        openNew();
        createHtmlEdit("空", 2);
    });
    $('body').on('click', '#add-save', function () {
        var aName = $('#name').val();
        var tel = $('#tel').val();
        var a = $('#a').val();
        var b = $('#b').val();
        var c = $('#c').val();
        var d = $('#d').val();
        var num = $('#num').val();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/add',
            type: 'POST',
            data: {
                cust_name: aName,
                company_tel: tel,
                province: a,
                city: b,
                area: c,
                company_address: d,
                cust_code: num
            },
    xhrFields:{
    withCredentials:true
    },
            success: function (data) {
                if (data.state) {
                    TOAST.success("添加成功", ' ', 1);
                    $('#mask').remove();
                    $('#login').remove();
                    return init();
                } else {
                    TOAST.wran(data.errormsg,' ', 1)
                }
            },
            error: function () {
                TOAST.wran("网络错误", ' ', 1)
            }
        })
    });
    // 修改提交
    $('body').on('click', '#modify', function () {
        var aName = $('#name').val();
        var tel = $('#tel').val();
        var a = $('#a').val();
        var b = $('#b').val();
        var c = $('#c').val();
        var d = $('#d').val();
        var num = $('#num').val();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/modify',
            type:'POST',
            data: {
                cust_name: aName,
                company_tel: tel,
                province: a,
                city: b,
                area: c,
                company_address: d,
                cust_code: num
            },
    xhrFields:{
    withCredentials:true
    },
            success:function (data) {
                if (data.state) {
                    TOAST.success(data.errormsg, ' ', 1);
                    $('#mask').remove();
                    $('#login').remove();
                    return init();
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function () {
                TOAST.wran('网络错误', ' ', 1)
            }
        })
    });
    // 删除落地服务
    $('body').on('click', '.js-delete', function () {
        var id = $(this).attr('data-id');
        var isDelete = confirm("是否确认删除？");
        if (isDelete) {
            $.ajax({
                url: 'http://api.hongyanche.com/maintain_admin/remove',
                type: 'POST',
                data: {
                    cust_code: id
                },
    xhrFields:{
    withCredentials:true
    },
                success: function (data) {
                    if (data.state) {
                        TOAST.success(data.errormsg, '', 1);
                        return init();
                    } else {
                        TOAST.wran(data.errormsg, '', 1)
                    }
                },
                error: function () {
                    TOAST.wran("网络错误", ' ', 1)
                }
            })
        }
    });
    function refresh() {
        window.location.href = window.location.href;
    }
   $.ajax({
        url:"http://api.hongyanche.com/maintain_admin/label_list",
        type:"POST",
    xhrFields:{
    withCredentials:true
    },
        success:function(data){
            if(data.state){
                data.data.list.forEach(function(item){
                        $("#label-list").append(`<option value="${item.cn_code}">${item.cn}</option>`);
                })
            }
        }
   })

   // 搜索
    $('body').on('change', '#label-list', function () {
        TOAST.load('加载中',' ', 10);
        var cn_code = $(this).val();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/getlist',
            type: 'POST',
            xhrFields:{
    withCredentials:true
    },
            data: {
                cust_type: cn_code,
            },
    xhrFields:{
    withCredentials:true
    },
            success: function (data) {
                if (data.state) {
                    TOAST.stop();
                    var datas = data.data.list;
                    var page = data.page;
                    $('#page').html(page);
                    return createHtml(datas);
                }
                return TOAST.wran('失败', ' ', 1);
            }
        });
    });
</sss>